<template>
	<w-layout showNavbar navTitle="福利屋详情" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-40 pt-40 mt-40">
					<view class="fr-ac u-border-bottom pb-30" style="border-color: var(--gray-line) !important;">
						<image style="width: 112rpx;height: 112rpx;border-radius: 50%;" :src="state.room.headimg" mode="widthFix"></image>
						<view class="ml-20 flex-1">
							<view class="">
								{{state.room.title}}
							</view>
							<view class="fr-ac mt-20">
								<view class="op-50">
									{{state.room.end_time+'开赏'}}
								</view>
							</view>
						</view>
					</view>
					<view class="fr-ac mb-25 mt-30 fs-24 op-50" style="line-height: 1.6;">
						{{state.room.description}}
					</view>
					
					<view class="public-cover-3 px-18 py-8 color fs-24" style="position: absolute;top: 4rpx;right: 4rpx;">
						{{state.room.user_id >0? '个人': '官方'}}
					</view>
				</view>
				
				<view class="px-70">
					<up-tabs
						@change="tabChange"
						:list="tabs.list" 
						:current="tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1.2)'
						}"
						:scrollable="false"
						itemStyle="height: 60px;"
					>
					</up-tabs>
				</view>
				
				<!-- 赏品预览 -->
				<template v-if="tabs.current == 0">
					<view class="gap-30" style="display: grid;grid-template-columns: repeat(2,1fr);">
						<view class="public-card-5 fc px-30 py-30" style="min-height: 450rpx;" v-for="(item,index) in state.goods" :key="index">
							<image style="width: 100%;height: 250rpx;" :src="item.imgurl" mode="widthFix"></image>
							<view class="mt-30 fs-24 ellipsis-2" style="line-height: 1.6;">
								{{item.title}}
							</view>
							<view class="color fs-32 mt-20">
								¥{{item.money}}
							</view>
						
						</view>
					</view>
				</template>
				
				<!-- 参与人数 -->
				<template v-if="tabs.current == 1">
					<view class="mt-40 u-border-bottom pb-30 fr-ac" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.join_user" :key="index">
						<view class="color bold mr-30">
							{{index+1}}
						</view>
						<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="item.headimg" mode=""></image>
						<view class="flex-1 mx-20">
							<view class="ellipsis-1">
								{{item.nickname}}
							</view>
							<view class="mt-10 op-70">
								{{item.user_addtime || item.addtime}}
							</view>
						</view>
					</view>
				</template>
				
				<!-- 中奖记录 -->
				<template v-if="tabs.current == 2">
					<view class="mt-40 u-border-bottom pb-30 fr-ac" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.record" :key="index">
						<view class="color bold mr-30">
							{{index+1}}
						</view>
						<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="item.headimg" mode=""></image>
						<view class="w-28 mx-20">
							<view class="ellipsis-1 op-90">
								{{item.nickname}}
							</view>
						</view>
						<view class="flex-1 ml-10 fr-ac">
							<image style="width: 80rpx;height: 80rpx;" :src="item.imgurl" mode=""></image>
							<view class="ml-15 flex-1">
								<view class="ellipsis-1 op-90">
									{{item.title}}
								</view>
								<view class="color mt-10">
									¥ {{item.money}}
								</view>
							</view>
							<view class="ml-auto">
								<cut-corner :arrow="3" clipSize="8rpx">
									<view class="color fr-ac-jc fs-26" style="width: 54rpx;height: 50rpx;background-color: #153E4C;">
										x1
									</view>
								</cut-corner>
							</view>
						</view>
					</view>
				</template>
				
				
				
				<fixed-bottom>
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac">
							<image style="height: 32rpx;width: 32rpx;" src="/static/icon/public/time.png" mode=""></image>
								
							<view class="ml-10 op-90">
								<template v-if="state.timestamp">
									<up-count-down
										:time="state.timestamp"
										format="DD:HH:mm:ss"
										autoStart
										millisecond
										@change="onChange"
										@finish="onFinish"
									>
										<text>距离开赏</text>
										<text class="color mx-5">{{ timeData.days }}</text>
										<text>天</text>
										<text class="color mx-5">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</text>
										<text>时</text>
										<text class="color mx-5">{{ timeData.minutes }}</text>
										<text>分</text>
										<text class="color mx-5">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</text>
										<text>秒</text>
									</up-count-down>
								</template>
								<template v-else>
									<view class="color fs-36">
										<text>已开赏</text>
									</view>
								</template>
							</view>
							
							
							<view v-if="!state.timestamp" class="public-btn-5 ml-auto fr-ac-jc color op-50" style="width: 174rpx;height: 60rpx;">
								已结束
							</view>
							<view v-else-if="state.room.is_join != 1" @click="popup.showTime = true" class="public-btn-6 ml-auto fr-ac-jc color" style="width: 174rpx;height: 60rpx;">
								加入房间
							</view>
							<view v-else-if="state.room.is_join == 1" class="public-btn-5 ml-auto fr-ac-jc color op-50" style="width: 174rpx;height: 60rpx;">
								已加入
							</view>
							
						</view>
					</template>
				</fixed-bottom>
				
				
				<up-popup :show="popup.showTime" @close="popup.showTime = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-3 px-50 py-20 fc" style="width: 670rpx;min-height: 600rpx;position: relative;">
						<view class="fs-36">
							时间提示
						</view>
						<view class="mt-80 op-70">
							需在指定时间内
						</view>
						<view class="mt-25">
							<text class="color">{{state.room.money_start_time}}</text>
							<text class="mx-5">至</text>
							<text class="color">{{state.room.money_end_time}}</text>
						</view>
						<view class="mt-25 op-70">
							消费达到{{state.room.money}}元即可进入房间
						</view>
						<view class="fr-ac gap-40 w-100 mt-auto">
							<view @click="popup.showTime = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view @click="confirmJoin" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									{{state.is_ls_join == 1 ? '立即加入' : '立即去抽赏'}}
								</view>
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showPassword" @close="popup.showPassword = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-3 px-50 py-20 fc" style="width: 670rpx;min-height: 600rpx;position: relative;">
						<view class="fs-36">
							房间密码
						</view>
						<view class="mt-80">
							<up-gap height="30"></up-gap>
							<view class="fr-ac">
								<view class="op-90">
									密码
								</view>
								<view class="public-input-1 px-30 py-30 fr-ac-jsb flex-1 ml-50" style="color: #fff;">
									<input v-model="state.room_id" class="flex-1 fs-26" type="text" placeholder="请输入房间密码" />
								</view>
							</view>
						</view>
						
						<view class="fr-ac gap-40 w-100 mt-auto">
							<view @click="popup.showPassword = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view @click="goJoin" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									抽赏
								</view>
							</view>
						</view>
					</view>
				</up-popup>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		detail_room,
		join_room
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.id){
			state.id = options.id
			get_detail_room()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:0,
				name:'赏品预览',
			},
			{
				id:1,
				name:'参与人数',
			},
			{
				id:2,
				name:'中奖记录',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
	}
	
	const state = reactive({
		list:[1,1],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
		
		
		id:'',
		room: {},
		goods: [],
		join_user: [],
		record: [],
		is_ls_join: null,
		
		timestamp: null,
		
		room_id:'',
		
	})
	function initData(){
		state.list = []
		state.page = 1
		state.page = 1
		state.last_limit = 15
	}
	
	const popup = reactive({
		showTime:false,
		showPassword:false,
	})
	
	
	async function get_detail_room(){
		const res = await detail_room({
			room_id: state.id
		})
		state.room = res.room
		state.goods = res.goods
		state.join_user = res.join_user
		state.record = res.record.list
		state.is_ls_join = res.is_ls_join
		
		state.timestamp = calculateTimeDifference(state.room.end_time)
		console.log(state.timestamp,'22222222')
	}
	
	
	// 计算两个日期之间的差异
	function calculateTimeDifference(inputTime) {
		const currentTime = new Date(); // 获取当前时间
		const inputDate = new Date(inputTime); // 将输入的时间字符串转换为Date对象
	
		// 计算两个日期之间的差异（单位为毫秒）
		const differenceInMilliseconds = inputDate - currentTime ;
		
		return differenceInMilliseconds<0? 0 :differenceInMilliseconds
	}
	
	
	// 使用 reactive 创建响应式对象
	const timeData = ref({});  
	// 定义 onChange 方法
	const onChange = (e) => {  
		timeData.value = e;  
	};  
	const onFinish = (e)=>{
		initData()
		get_detail_room()
	}
	
	async function goJoin(){
		const res = await join_room({
			room_id:state.room.id,
			command:state.room_id
		})
		uni.$u.toast('成功参与！')
		popup.showPassword = false;
		
		state.room_id = ''
		get_detail_room()
	}
	
	function confirmJoin(){
		if(state.is_ls_join != 1) {
			uni.reLaunch({
				url:"/pages/index/index"
			})
			return
		}
		
		popup.showTime = false
		popup.showPassword = true
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
</style>